<script setup>
import AboutUs from '~/components/home/AboutUs.vue'
import Banner from '~/components/home/Banner.vue'
import Case from '~/components/home/Case.vue'
import News from '~/components/home/News.vue'
import Products from '~/components/home/Products.vue'
import Partner from '~/components/home/Partner.vue'
import Links from '~/components/home/Links.vue'
import Pagination from '~/components/home/Pagination.vue'

// definePageMeta({
//   layout: 'home',
// })
refreshNuxtData()
const { init, swiper } = useInitSwiper()

const { changeMode } = useHeader('transparent')

const activeIndex = ref(0)
const { y } = useWindowScroll()

function onSlideChange(e) {
  activeIndex.value = e.activeIndex
  if ([0, 3].includes(e.activeIndex))
    changeMode('transparent')
  else
    changeMode('light')
  if (e.activeIndex >= 5)
    swiper.value.disable()
}

watch(y, (newY) => {
  if (newY === 0) {
    setTimeout(() => {
      if (!swiper.value?.enabled)
        swiper.value.enable()
    }, 500)
  }
  // changeMode(newY > 90 ? 'light' : 'transparent')
})

function onClickIndicator(i) {
  swiper?.slideTo(i)
}
</script>

<template>
  <div>
    <Swiper
      class="h-screen"
      :modules="[SwiperMousewheel]"
      :mousewheel="{
        forceToAxis: true,
        releaseOnEdges: true,
      }"
      :nested="true"
      :slides-per-view="1"
      direction="vertical"
      @swiper="init"
      @slide-change="onSlideChange"
    >
      <SwiperSlide>
        <Banner :active="activeIndex === 0" />
      </SwiperSlide>
      <SwiperSlide>
        <AboutUs :active="activeIndex === 1" />
      </SwiperSlide>
      <SwiperSlide>
        <Products :active="activeIndex === 2" />
      </SwiperSlide>
      <SwiperSlide>
        <Case :active="activeIndex === 3" />
      </SwiperSlide>
      <SwiperSlide>
        <News :active="activeIndex === 4" />
      </SwiperSlide>
      <!-- <SwiperSlide>
        <Partner :active="activeIndex === 5" />
      </SwiperSlide> -->
    </Swiper>
    <Links />
    <Pagination :enabled="swiper?.enabled" :active-index="activeIndex" @click-indicator="onClickIndicator" />
  </div>
</template>
